<template>
  <div style="margin: 0 auto; background-color: #fff; height: 95%;" v-if="info">
    <div class="right" id="information">
      <div class="box">
        <div class="right-head">
          <div class="right-head-con">基本信息</div>
        </div>
        <div class="template-box">
          <div class="img-box"><img
            src="../../assets/images/yht_index_mingpinimg.png"
            alt=""></div>
          <div class="text-box" style="padding-top: 35px;" v-if="userInfo">
            <p>用户ID： {{userInfo.uid}}</p>
            <p>昵称： {{userInfo.nickname}}</p>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="right-head">
          <div class="right-head-con">登录设置</div>
        </div>
        <div class="template-box">
          <div class="text-box">
            <p>手机号：{{userInfo.mobile}}</p>
            <p>登录密码
              <el-button type="primary" round plain @click="dialogFormVisible = true" style="color: #29ba9c !important; background: #eaf8f5 !important; border-color: #a9e3d7 !important;">设置</el-button>
            </p>
          </div>
        </div>
      </div>

      <el-dialog title="设置密码" :visible.sync="dialogFormVisible" width="600px">
        <div class="dialog-box">
          <p class="phone">手机号码： {{userInfo.mobile}}</p>
          <div class="send-code"  v-if='imgcode'>
            <p class="code-title">图形验证码：</p>
            <el-input v-model.trim="form.captcha" style="margin-right: 20px;"></el-input>
            <img class="imgCode" :src="imgcode" @click="getimgdata" />
          </div>
          <div class="send-code">
            <p class="code-title">输入验证码：</p>
            <el-input v-model.trim="form.code" style="margin-right: 20px;"></el-input>
            <el-button type="primary" @click="sendCode" size="small" v-if="count==0" style="background-color: #29ba9c !important; border-color: #29ba9c !important;">获取手机验证码</el-button>
            <el-button type="primary" disabled v-if="count!=0" size="small" style="background-color: #29ba9c !important; border-color: #29ba9c !important;">{{count}} 秒后重新获取</el-button>
          </div>
          <div class="send-code">
            <p class="code-title">新密码：</p>
            <el-input type="password" v-model.trim="form.password" style="margin-right: 20px;"></el-input>
          </div>
          <div class="send-code">
            <p class="code-title">确认密码：</p>
            <el-input type="password" v-model.trim="form.confirm_password" style="margin-right: 20px;"></el-input>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="changePwd" style="background-color: #29ba9c !important; border-color: #29ba9c !important;">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="" :visible.sync="dialogBuyVisible" width="500px">
        <div class="scan-box">
          <div class="img-box1">
            <p v-show="!qrSuccess">正在生成二维码</p>
            <canvas v-show="qrSuccess" id="qrccode-canvas"></canvas>
          </div>
          <div>使用微信扫描二维码，前往商城购买合同</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { Button , Dialog  , Message } from "element-ui";
  Vue.use(Button).use(Dialog);
  Vue.prototype.$message = Message;
  import http from './js/http.js';
  import QRCode from "qrcode";
  var canvas = "";

  export default {
    data() {
      return {
        person: {},
        count: 0,
        timer: null,
        qrSuccess: false,
        dialogBuyVisible: false,
        dialogFormVisible: false,
        formLabelWidth: "120px",
        showDialog: false,
        imgcode: "",
        form: {
          captcha: "",
          code: "",
          password: "",
          confirm_password: ""
        },
        userInfo: {},
        info: false
      };
    },
    activated() {
      this.getimgdata();
      this.getUserInfo();
    },
    created() {
      // 获取管理员头像
      // this.getimgdata();
      // this.getUserInfo();
    },
    mounted() {
      this.$nextTick(function() {
        // DOM操作
        canvas = document.getElementById("qrccode-canvas");
      });
    },
    methods: {
      // 获取用户信息
      async getUserInfo() {
        try {
          let {data,result,msg} =  await http.get("member.member-info.user-info-update-page",{});
          if(result) {
            this.userInfo = data;
            this.info = true;
          }else {
            this.$message.error(msg);
          }
        } catch ({data,result,msg}) {
          this.$message.error(msg);
        }
      },
      //获取图片验证码
      getimgdata() {
        http.get("home-page.getCaptcha")
          .then(res => {
            if (res.data.captcha) {
              this.imgcode = res.data.captcha.img;
            }
          })
          .catch(({data,result,msg}) => {
            this.$message.error(msg);
          });
      },
      createQrc() {
        this.dialogBuyVisible = true;
        // let _url = this.fun.getSiteRoot() + "/addons/yun_shop/" + "?menu#" + "/search?i=1";
        let _url = this.person.goods_list_url;
        this.$nextTick(function() {
          // DOM操作
          canvas = document.getElementById("qrccode-canvas");
        });
        setTimeout(()=>{
          QRCode.toCanvas(canvas, _url, error => {
            if (error) {
              this.qrSuccess = false;
              console.log(error);
            } else {
              this.qrSuccess = true;
              console.log("success");
            }
          });
        },1000);

      },
      changePwd() {
        if (!this.form.code) {
          this.$message.error("请输入验证码!");
          return;
        }
        if (!this.form.password) {
          this.$message.error("请输入新密码!");
          return;
        }
        if (!this.form.confirm_password) {
          this.$message.error("请再次输入密码");
          return
        } else if (this.form.confirm_password !== this.form.password) {
          this.$message.error("两次输入密码不一致!");
          return
        }
            http
              .post(
                "member.register.changePassword",
                {
                  mobile: this.userInfo.mobile,
                  code: this.form.code,
                  password: this.form.password,
                  confirm_password: this.form.confirm_password
                },
                "提交中"
              )
              .then(response => {
                if (response.result === 1) {
                  this.dialogFormVisible = false;
                  this.form = {
                    code: "",
                    password: "",
                    confirm_password: ""
                  };
                  this.$message.success("修改成功!");
                } else {
                  this.form = {
                    code: "",
                    password: "",
                    confirm_password: ""
                  };
                  this.$message.error(response.msg);
                }
              })
              .catch(({data,result,msg}) => {
                this.form = {
                  code: "",
                  password: "",
                  confirm_password: ""
                };
                this.$message.error(msg);
                console.error(msg);
              });
      },
      // 获取手机验证码
      sendCode() {
        if (!this.form.captcha && this.imgcode) {
          this.$message.error("请先填写图形验证码");
          return;
        }
        http
          .post("member.register.sendCodeV2", { mobile: this.userInfo.mobile, reset: "1", sms_type: 2,captcha: this.form.captcha, }, " ")
          .then(response => {
            if (response.result === 1) {
              this.$message.success('发送成功');
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000)
              }
            } else {
              this.$message.error(response.msg);
            }
          })
          .catch(({data,result,msg}) => {
            this.$message.error(msg);
          });
      },
      getData() {
        http
          .get("plugin.yun-sign.frontend.person.get-person-info")
          .then(response => {
            if (response.result === 1) {
              this.person = response.data;
            } else {
              this.$message.error(response.msg);
            }
          })
          .catch(({data,result,msg}) => {
            this.$message.error(msg);
          });
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .right {
    padding: 30px;
    width: 1200px;
    margin: 0 auto;
    overflow: auto;
    background-color: #fff;
    height: 100%;

    .right-head {
      line-height: 50px;
      border-bottom: 1px #ccc solid;
      margin-bottom: 15px;
      display: flex;

      .right-head-con {
        display: inline-block;
        padding-right: 20px;
        font-size: 16px;
        color: #888;
      }
    }

    .box {
      margin-bottom: 30px;
    }

    .template-box {
      padding: 0 40px;
      font-size: 15px;
      display: flex;
    }

    .img-box {
      width: 120px;
      height: 120px;
      flex: 0 0 120px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      /* border: 1px solid #e4e6e9; */
      border-radius: 4px;

      img {
        width: 100%;
      }
    }

    .text-box {
      display: flex;
      flex-direction: column;
      text-align: left;
      margin-left: 20px;
      padding: 10px;

      p {
        margin-bottom: 20px;
      }

      .link {
        color: #409eff;
        cursor: pointer;

        &:hover {
          color: #2b82ff;
        }
      }
    }

    .flex {
      flex-direction: row;
      width: 70%;

      p {
        flex: 1;
      }
    }
  }

  .dialog-box {
    .phone {
      width: 450px;
      margin: 0 auto;
      text-align: left;
      font-size: 16px;
    }

    .send-code {
      position: relative;
      display: flex;
      width: 450px;
      margin: 30px auto;
    }

    .code-title {
      flex: 0 0 100px;
      align-self: center;
    }
  }

  .scan-box {
    text-align: center;

    .img-box1 {
      width: 220px;
      height: 220px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      margin: 20px auto;

      img {
        width: 100%;
      }
    }
  }

  .imgCode {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    height: 100%;
  }

  #qrccode-canvas {
    width: 220px !important;
    height: 220px !important;
  }
</style>
